<template>
	<view>
		<fa-navbar title="职业技能认定"></fa-navbar>
		<view class="content">
			<view class="search">
				<u-search height="68" searchIconSize="44" :clearabled="true" bgColor="#ffffff" margin="34rpx 0"
					shape="round" placeholder="请输入技能培训关键词" :showAction="false" v-model="keyword" @search="searchKeyword"
					@clear="searchKeyword"></u-search>
			</view>
			<view class="jnpx">
				<view class="category">
					<u-tabs :list="majorList" lineHeight="8" lineWidth="40" keyName="name" :current="current"
						lineColor="#0052D9"
						:activeStyle="{'fontWeight':'bold',transform: 'scale(1.05)','font-size':'32rpx','color':'#000000'}"
						:inactiveStyle="{'color':'#333333','font-size':'30rpx'}"
						:itemStyle="{'padding-left':'0rpx','height':'88rpx'}" @click="clickCategory">
						<view slot="right" style="padding-left: 8rpx;" @tap="courseShow=true">
							<u-icon name="list" size="36" bold></u-icon>
						</view>
					</u-tabs>
				</view>
				<view class="classes">
					<fa-appraisal-item :classesList="classesList" :type="'list'"></fa-appraisal-item>
				</view>
			</view>

		</view>
		<!-- 加载更多 -->
		<view class="u-p-b-30" v-if="classesList.length">
			<u-loadmore bg-color="#f4f6f8" fontSize="28" :line="true" :status="has_more ? status : 'nomore'" />
		</view>
		<!-- 空数据 -->
		<view class="fa-empty" v-if="!classesList.length">
			<u-empty textSize="28" mode="data"></u-empty>
		</view>
		<!-- 课程分类 -->
		<u-popup :show="courseShow" mode="left" @close="closeCourse" :customStyle="{width:'660rpx'}">
			<view class="up-category">
				<view class="title">
					<text>技能培训分类</text>
				</view>
				<view class="major">
					<view class="item" v-for="(item,index) in collegeList" :key="index">
						<view class="xueyuan">
							<u-line class="u-line" margin="0 18rpx 0 0" :hairline="false" :color="theme.bgColor"
								direction="col"></u-line>
							<text>{{item.name}}</text>
						</view>
						<view class="zye">
							<block v-for="(item1,index1) in item.major" :key="index1">
								<text @click="clickCategory1(item1)"
									:class="item1.id==major_id?'major-active':''">{{item1.name}}</text>
							</block>

						</view>
					</view>

				</view>
				<view class="btn">
					<u-button text="取消" shape="circle"
						:customStyle="{'background-color':'#AEB6C2','color':'#ffffff','width':'180rpx','height':'68rpx','line-height':'68rpx'}"
						@click="closeMajor"></u-button>
					<u-button text="确认" shape="circle"
						:customStyle="{'background-color':'#0052D9','color':'#ffffff','width':'360rpx','height':'68rpx','line-height':'68rpx','margin-left':'24rpx'}"
						@click="okMajor"></u-button>
				</view>
			</view>
		</u-popup>
		<!-- 回到顶部 -->
		<u-back-top :scroll-top="scrollTop" :icon-style="{ color: theme.bgColor }"
			:custom-style="{ backgroundColor: lightColor }"></u-back-top>

	</view>
</template>

<script>
	import FaAppraisalItem from './components/fa-appraisal-item/fa-appraisal-item.vue';
	export default {
		components:{
			FaAppraisalItem
		},
		data() {
			return {
				majorList: [],
				collegeList: [],
				classesList: [],
				keyword: '',
				page: 1,
				has_more: true,
				courseShow: false,
				major_id: 0,
				current: 0
			};
		},
		onLoad(e) {
			
			this.major_id = e.major_id||0
			this.getClassesList()
			this.$nextTick(()=>{
				this.getCollegeList()
			})
		},
		
		
		onReachBottom() {
			if (this.has_more) {
				this.page += 1;
				this.getClassesList();
			}
		},
		methods: {
			searchKeyword() {
				this.page = 1;
				this.getClassesList()
			},

			clickCategory(e) {
				this.major_id = e.id
				this.current = e.index
				this.page = 1
				this.getClassesList()
			},
			clickCategory1(e) {
				this.major_id = e.id

			},
			openCategory() {
				this.courseShow = true
			},
			closeCourse() {
				this.courseShow = false
			},
			getClassesList() {
				this.$api.getClassesList({params:{page:this.page,keyword:this.keyword,major_id:this.major_id}}).then((res)=>{
					if(res.code){
						if (this.page === 1) {
							this.classesList = [];
						}
						let classesList = res.data.data
						let pageList = res.data
						this.has_more = pageList.current_page < pageList.last_page;
						this.classesList = [...this.classesList, ...classesList];
					}
				})
			},
			getCollegeList() {
				let that = this;
				this.$api.getCollegeList({}).then((res) => {
					if (res.code) {
						this.collegeList = res.data.collegeList
						this.majorList = res.data.majorList
						if(that.major_id){
							this.majorList.map((item,index)=>{
								if(item.id == that.major_id){
									that.current = index
								}
							})
						}

					}
				})
			},
			
			closeMajor(){
				this.courseShow = false
				this.major_id = 0
				this.current = 0
				this.page = 1
				this.getClassesList()
			},
			okMajor(){
				let that = this
				that.page = 1
				this.majorList.map((item,index)=>{
					if(that.major_id == item.id){
						that.current = index
					}
				})
				this.courseShow = false
				this.getClassesList()
			},
			// openDetail(item){
			// 	uni.$u.route({
			// 		url: '/pages/training/detail',
			// 		params:{classes_id: item.id},
			// 	})
			// 	return
			// }
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		padding: 32rpx 24rpx;
	}

	.search {
		margin-top: 188rpx;
	}
	.classes{
		
		
	}
	.up-category {
		padding: 88rpx 48rpx 0 48rpx;

		.title {
			font-size: #000000;
			font-size: 32rpx;
			font-weight: 600;
			margin-bottom: 24rpx;
		}

		.major {
			.category {
				margin-bottom: 32rpx;
			}

			.item {

				/deep/ .u-line {
					height: 28rpx !important;
					border-left-width: 6rpx !important;
					// color: #333333;
				}

				.xueyuan {
					display: flex;
					align-items: center;
					margin-top: 24rpx;
				}

				.zye {
					display: flex;
					flex-wrap: wrap;
					text {
						background-color: #F3F5F8;
						padding: 16rpx 18rpx;
						font-size: 26rpx;
						color: #666666;
						margin-right: 24rpx;
						border-radius: 10rpx;
						margin-top: 24rpx;
					}
				}
			}
		}
		
		.btn{
			display: flex;
			position: absolute;
			bottom: 40rpx;
			left:24rpx;
			right: 24rpx;
		}
		.major-active{
			background-color: #E2EDFF !important;
			border: 1rpx solid #0052D9;
			color: #0052D9;
		}
	}
</style>